html {
  --brand-green: hsla(162, 87%, 21%, 1);
  --dark-green: hsla(162, 88%, 30%, 1);
  --medium-green: hsla(162, 73%, 46%, 1);
  --text-color: hsla(210, 11%, 15%, 1);
  --gray: hsla(210, 7%, 56%, 1);
  --light-gray: hsla(210, 17%, 95%, 1);
  --extra-light-gray: hsla(210, 17%, 98%, 1);
  --white: hsla(0, 100%, 100%, 1);
  --red: hsla(342, 63%, 46%, 1);

  font-size: calc(0.5em + 1vw);
}

.flex {
  display: flex;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}
.flex-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-horizontal-center {
  display: flex;
  justify-content: center;
}
.flex-vertical-center {
  display: flex;
  align-items: center;
}

.mt-normal {
  margin-top: 0.625em;
}
.ml-normal {
  margin-left: 0.625em;
}
.mb-normal {
  margin-bottom: 0.625em;
}
.mr-normal {
  margin-right: 0.625em;
}

.pt-normal {
  padding-top: 0.625em;
}
.pl-normal {
  padding-left: 0.625em;
}
.pb-normal {
  padding-bottom: 0.625em;
}
.pr-normal {
  padding-right: 0.625em;
}
.p-normal {
  padding: 0.625em;
}